<template>
    <div class="cash">
        <group>
             <cell title="提现渠道" @click.native="encash_channel" is-link></cell>
            <x-input title="账户" v-model="cash.account" placeholder="输入提现账户"></x-input>
            <x-input title="姓名" v-model="cash.name" placeholder="账户的姓名 真实姓名"></x-input>
            <x-input title="金额" v-model="cash.amount" type="tel" placeholder="输入金额 1-10000"></x-input>
            <template v-if="cash.channel_type === 'bank'">
            <x-input title="开户行" v-model="cash.open_bank" placeholder="开户银行,如[建设银行]"></x-input>
            <x-input title="支行" v-model="cash.open_bank_code" placeholder="支行名称, 如[上海南京东路支行]"></x-input>
        </template>
    </group>
    <group>
        <x-button @click.native="push_cash" type="primary">确认提现</x-button>       
    </group>
    <actionsheet v-model="sheet" :menus="menu" @on-click-menu="click_cash"></actionsheet>
    <div class="cash-table" v-show="cashes.length > 0">
        <divider>
            <span>我的提现记录</span>
        </divider>
        <group>
            <x-table>
                <thead>
                    <tr>
                        <th>账户</th>
                        <th>姓名</th>
                        <th>金额</th>
                        <th>渠道</th>
                        <th>进度</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="cash in cashes">
                        <td>{{cash.account}}</td>
                        <td>{{cash.name}}</td>
                        <td>{{cash.amount}}</td>
                        <td>{{cash.channel_type}}</td>
                        <td>{{cash.status}}</td>
                    </tr>
                </tbody>
            </x-table>
        </group>
        </div>
    </div>
</template>
<script>
    import {XInput, Group, Cell, XTable, XButton, Toast, Divider, Actionsheet} from 'vux'
import InfiniteLoading from 'vue-infinite-loading'

export default {
    components: {
        XInput, 
            Group,
            XButton,
            Toast,
            Cell,
            XTable,
            Actionsheet,
            Divider,
            InfiniteLoading

    },
    data() {
        return {
            cashes: [],
            show: false,
            sheet: false,
            page: {next_page: 0},
            cash: {
                name: null,
                account: null,
                amount: null,
                channel_type: null,
                open_bank_code: null,
                open_bank: null
            },
            menu: {
                bank: "银行卡",
                alipay: "支付宝",
                wx_pub: "微信"
            }
        }
    },
    created() {
        this.$store.commit("storeState", false)
        this.fetch_record()
    },
    methods: {
        fetch_record(){
            this.$http.get("users/owner_encash.json", {params: {page: this.page.next_page, limit: 10}}).then(res => {
                let data = res.data
                this.cashes = data.recipients
                this.page = data.page
            })
        },
            encash_channel(){
                this.sheet = true
            },
            click_cash(key) {
                this.cash.channel_type = key
            },
            push_cash(){
                this.$http.post("users/appoint_cash.json", this.cash).then(res => {
                    let data = res.data
                    if (data.code > 200) {
                        this.$vux.toast.show({
                            type: "warn",
                            text: data.msg
                        })
                    } else {
                        this.$vux.toast.show("提交成功")
                    }
                })
            }
    }
}
</script>
